<template>
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      ref="uploadRef"
      :on-change="uploadFile"
      :on-remove="handleRemove"
      :file-list="fileList"
      :limit="3"
      :on-exceed="moreLimit"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
   </template>
   <script setup lang="ts">
   import { uploadImageApi } from "../api/img/index";
   import { ref } from "vue";
   import { Plus } from "@element-plus/icons-vue";
   import { NewType } from "../type/BaseType";
   import { ElMessage, UploadFile, UploadUserFile,UploadFiles } from "element-plus";
   //注册事件
  const emits = defineEmits(['getImg'])
   //图片上传组件的ref属性
  const uploadRef = ref();
   const dialogImageUrl = ref("");
   const dialogVisible = ref(false);
   type PropType = {
  fileList: UploadUserFile[];
   oldUrl: Array<{ url: string }>;
   };
   //接收父组件传递的参数
  const props = withDefaults(defineProps<PropType>(), {
   fileList: () => [],
   oldUrl: () => [],
   });
   //返回给父组件的值
  const newImgRes = ref<NewType>({
   newImgUrl: [],
   deleteUrl: [],
   });
   //删除图片
  const handleRemove = (file: UploadFile) => {
   if(props.oldUrl.some(item => item.url === file.name)){
   newImgRes.value.deleteUrl.push({url:file.name})
   emits("getImg", newImgRes.value);
   }else{
   let images = newImgRes.value.newImgUrl.filter((item) => item.url != 
  file.name);
   newImgRes.value.newImgUrl = images;
   emits("getImg", newImgRes.value);
   }
   };
   //文件个数超出
  const moreLimit = (files: File[], uploadFiles: UploadFiles) => {
   ElMessage.warning("最多只能上传" + uploadFiles.length + "张图片!");
   };
   //上传数据提交
  const uploadFile = async (file: any) => {
   //判断选择的图片是不是图片类型
  const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
   const isImg = typeArr.indexOf(file.raw.type) !== -1;
   const isMore3M = file.size / 1024 / 1024 < 3;
   if (!isImg) {
   ElMessage.warning("只能上传图片类型!");
   uploadRef.value?.clearFiles();
   return;
   }
   if (!isMore3M) {
   ElMessage.warning("图片大小不能超过3M!");
   uploadRef.value?.clearFiles();
   return;
   }
   //组装上传的数据
  const formData = new FormData();
   formData.append("file", file.raw);
   //提交数据
  const res = await uploadImageApi(formData)
   if(res && res.code == 200 && res.data){
   ElMessage.success('图片上传成功')
   file.name = process.env.BASE_API + res.data;
   //设置到返回子组件的数据里面
  newImgRes.value.newImgUrl.push({
   url:process.env.BASE_API + res.data
   })
      emits('getImg',newImgRes.value)
    }
   };
   //清空数据
  const clearimg = ()=>{
    uploadRef.value?.clearFiles();
    newImgRes.value.deleteUrl = [];
    newImgRes.value.newImgUrl = [];
   }
   defineExpose({
    clearimg
   })
   </script>
   <style scoped></style>